<template>
  <div>
    <ul class="con">
      <li v-for="item in list" :key="item.id" @click="gotoDetail(item.id)">
        <img :src="item.img" alt="" />
        <p>{{ item.title }}</p>
        <h5>价格{{ item.price }}</h5>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: "小猫",
          img: "01.jpg",
          price: 2000,
        },
        {
          id: 2,
          title: "小狗",
          img: "02.jpg",
          price: 700,
        },
        {
          id: 3,
          title: "小猪",
          img: "03.jpg",
          price: 1000,
        },
        {
          id: 4,
          title: "恐龙",
          img: "04.jpg",
          price: 1000,
        },
        {
          id: 5,
          title: "熊",
          img: "05.jpg",
          price: 3000,
        },
      ],
    };
  },
  methods: {
    gotoDetail(id) {
      // this.$router.push({ path: "/detail", query: { id: id } });
      //跳转详情页 并且携带一个id 表明身份
      this.$router.push({ name: "detail", params: { id: id } });
      //params传参 只能用name传
    },
    //跳转详情页
  },
};
</script>
<style lang="scss">
.con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  li {
    width: 48%;
    background: #ccc;
    margin-top: 20px;
    img {
      width: 100%;
    }
  }
}
</style>
